/**
 * Created by mapbar_front on 2019/8/1.
 */
import React,{Component} from 'react';
const themes = {
    light: {
        background: '#f99',
    },
    dark: {
        background: '#9ff',
    }
}
const ThemeContext = React.createContext(themes.dark);

function Toolbar(props){
    return(
        <ThemeButton/>
    )
}
function Button(props){
    let theme = props.theme;
    return(
        <button style={{backgroundColor: theme.background }}>
            btn
        </button>
    )
}
class ThemeButton extends Component{
    constructor(props){
        super(props);
    }
    static contextType = ThemeContext;
    render(){
        let props = this.props;
        return(
            <Button theme={this.context}>

            </Button>
        )
    }
}

class Context extends Component{
    render(){
        return(
            <ThemeContext.Provider value={themes.dark}>
                <Toolbar />
            </ThemeContext.Provider>
        )
    }
}
export default Context;

